<template>
<!--    推荐歌单页面-->
    <div class="recommendMusicList">
<!--        顶部精品歌单展示区域-->
            <div class="top">
                <div class="img" style="width: 170px;height: 170px;margin: 15px">
                    <img style="height: 100%;width: 100%" :src="boutique.coverImgUrl">
                </div>
                <div class="topContent" style="width:80%;height: 180px;margin: 10px">
                    <div style="margin: 5px">
                        <h2>{{boutique.name}}</h2>
                    </div>
                   <div style="overflow: hidden;width: 100%;height: 109px;margin: 5px">
                       {{boutique.description}}
                   </div>

                </div>
            </div>

<!--        标题歌单菜单选项区域-->
        <div class="menu">
            <div class="menuItem" v-for="(item,index) in menuList" :key="index" @click="listType(item)"><a href="#"  :class="{turnRed:cat===item}">{{item}}</a></div>
        </div>
<!--        歌单展示区域-->
        <div class="musicList">
            <div class="musicListItem" v-for="(item,index) in musicList" :key="index" @click="toPlayList(item.id)">
                <div style="width: 100%;height: 77%">
                        <img style="height: 100%;width: 100%; border-radius: 10px;" :src="item.coverImgUrl">
                </div>
                <div style="margin-top: 5px;color: black;font-size: 15px">
                    {{item.name}}
                </div>
        </div>
        </div>
<!--        分页列表区域-->
        <div style="margin-top: 30px;margin-left: 250px">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="10"
                    @current-change="handCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name: "recommendMusicList",
        data(){
            return{
                // 歌单类型
                menuList:['全部','欧美','华语','流行','说唱','摇滚','民谣','电子','轻音乐','影视原声','ACG','怀旧','治愈','旅行'],
                // 歌单列表
                musicList:[],
                // 精品歌单展示内容
                boutique:{},
                // 获取歌单类型
                cat:'全部',
                page:1,
                total:0
            }
        },
        created() {
            this.getBoutique(this.cat)
            this.getMusicList(this.cat,this.page)
        },
        methods:{
            // 获取顶部展示精品歌单信息
            getBoutique(cat){
                axios({
                    url:'https://autumnfish.cn/top/playlist/highquality',
                    method:'get',
                    params:{
                        limit:1,
                        cat
                    }
                }).then(res=>{
                    this.boutique=res.data.playlists[0]
                    console.log(this.boutique)
                },err=>{
                    console.log(err);
                })
            },
            // 获取不同类型歌单列表
            getMusicList(cat,page){
                axios({
                    url:'https://autumnfish.cn/top/playlist/',
                    method:'get',
                    params:{
                        limit:10,
                        cat,
                        offset:(page-1)*10
                    }
                }).then(res=>{
                    this.musicList=res.data.playlists
                    this.total=res.data.total;
                    console.log(this.musicList)
                },err=>{
                    console.log(err);
                })
            },
            // 切换类型获取歌单列表
                listType(cat){
                    this.cat=cat
                    this.getMusicList(this.cat,this.page)
                    this.getBoutique(this.cat)
                },
            // 点击分页面刷新数据
            handCurrentChange(val){
                this.page=val;
                this.getMusicList(this.cat,this.page)
            },
            // 跳转到歌单详情页面
            toPlayList(id){
                this.$router.push({
                    path:`/playlist/${id}`
                })
            }
        }
    }
</script>

<style scoped>
    .top{
        width: 97%;
        height: 200px;
        border: 1px solid black;
        display: flex;
    }
    .menu{
        margin-top: 20px;
        margin-bottom: 20px;
        width: 90%;
        height: 30px;

        display: flex;
       padding-left: 410px;
    }
    .menuItem{
        margin-left: 5px;
        height: 100%;

        line-height: 180%;
        font-size: 12px;
    }
    .musicList{
        width: 90%;
        height: 390px;
        display: flex;
        flex-wrap: wrap;

        justify-content: space-between;
    }
    .musicListItem{
        margin: 10px;
        width: 150px;
        height: 180px;
    }
    .turnRed{
        color: red;
    }
    .musicList:hover{
        cursor:pointer
    }
</style>